<template>
  <div class="registered">
    <v-header>
      <h1 slot="title">注册</h1>
    </v-header>
    <section>
      <mt-field
        label="昵称"
        placeholder="请输入昵称"
        type="text"
        v-model="account"
      ></mt-field>
      <mt-field
        label="密码"
        placeholder="请输入密码"
        type="password"
        v-model="password"
      ></mt-field>
      <p class="tip">Tip : 昵称必须是4-8位英文字符 密码必须是6-12位数字/字母</p>
    </section>
    <mt-button plain size="large" v-on:click="onSubmit">注册</mt-button>
  </div>
</template>

<script>
import Header from "@/common/_header.vue";
import { Toast } from "mint-ui";
import userMode from "../http/user";
export default {
  components: {
    "v-header": Header,
  },
  data() {
    return {
      account: "",
      password: "",
    };
  },
  methods: {
    async onSubmit() {
      let accountRrg = /^[a-z]{4,8}$/i;
      let pwdReg = /^[a-z0-9]{6,12}$/i;
      if (accountRrg.test(this.account) && pwdReg.test(this.password)) {
        console.log(this.account, this.password);
        let { data: list } = await userMode.query({ name: this.account });
        if (list.length) {
          Toast("该用户名已存在");
        } else {
          await userMode.add({ name: this.account, pwd: this.password });
          Toast("注册成功");
          setTimeout(() => {
            this.$router.replace({
              path: "user",
            });
          }, 1000);
        }
      } else {
        Toast("输入的昵称或密码不符合要求");
      }
    },
  },
};
</script>

<style scoped></style>
